<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/resources/css/font.css">
    <link rel="stylesheet" href="/resources/css/xadmin.css">
    <script src="/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/resources/js/xadmin.js"></script>
</head>
<!-- @formatter:off -->
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="id" placeholder="请输入订单编号" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="customerName" placeholder="请输入客户名称" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="goodsName" placeholder="请输入商品名称" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="priceUnit" placeholder="请输入价格单位" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <select id="orderStatus" name="orderStatus" class="valid">
                                    <option value="">请选择</option>
                                    <option value="未开始">未开始</option>
                                    <option value="已开始">已开始</option>
                                    <option value="已完成">已完成</option>
                                    <option value="订单取消">订单取消</option>
                                </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"><i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                        <button class="layui-btn" onclick="xadmin.open('添加订单','/plan/order-add', 800, 600)"><i class="layui-icon"></i>添加</button>
                    </div>
                    <div class="layui-card-body"><table class="layui-table layui-form" lay-filter="test" id="orderTable"></table></div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-text" style="margin: 5%; display: none" id="customerDetail" target="test123">
        <form class="layui-form" id="book" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-inline"><input type="text" id="customerName" name="customerName" class="layui-input"></div>
                <label class="layui-form-label">客户全称</label>
                <div class="layui-input-inline"><input type="text" id="fullname" name="fullname" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">传真</label>
                <div class="layui-input-inline"><input type="text" id="fax" name="fax" class="layui-input"></div>
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline"><input type="text" id="address" name="address" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">经理姓名</label>
                <div class="layui-input-inline"><input type="text" id="manager" name="manager" class="layui-input"></div>
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline"><input type="text" id="phone" name="phone" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline"><input type="text" id="mail" name="mail" class="layui-input"></div>
                <label class="layui-form-label">客户状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-verify="required">
                        <option value=""></option>
                        <option value="无效">无效</option>
                        <option value="有效">有效</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="customerIntroduce" name="desc" placeholder="请输入内容"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="site-text" style="margin: 5%; display: none" id="goodsDetail" target="test123">
        <form class="layui-form" id="book" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-inline"><input type="text" id="goodsName" name="bid" class="layui-input"></div>
                <label class="layui-form-label">产品种类</label>
                <div class="layui-input-inline"><input type="text" id="goodsType" name="bid" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品状态</label>
                <div class="layui-input-block"><input type="text" id="goodsStatus" name="bid" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相关图片</label>
                <div class="layui-input-block"><input type="text" id="image" name="bid" class="layui-input"></div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品介绍</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="goodsIntroduce" name="desc" placeholder="请输入内容"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="site-text" style="margin: 5%; display: none" id="required" target="test123">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">产品介绍</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="requirement" name="desc" placeholder="请输入内容"></textarea>
            </div>
        </div>
    </div>
</body>
<script type="text/html" id="tools">
    <button class="layui-btn layui-btn-xs" lay-event="edit" onclick="xadmin.open('部门编辑','/plan/order-edit')">编辑</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</script>

<!-- @formatter:on -->
<script>
    layui.config({
        base: '', // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
        version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
        dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
        debug: false // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
    });

    layui.use(function () {
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        let date = layui.laydate;
        let util = layui.util;

        table.render({
            elem: '#orderTable',
            even: true,    //隔行换色
            page: true, //开启分页
            url: '/plan/orderDetail',
            // 将原始数据解析成 table 组件所规定的数据格式
            parseData: function (result) {
                window.array = result;
                return {
                    "msg": result.msg, //解析提示文本
                    "count": result.total, //解析数据长度
                    "code": result.code == 200 ? 0 : -1,
                    "data": result.data //解析数据列表
                };
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'}, //开启多选框
                {field: 'id', title: '订单编号', sort: true},
                {field: 'customerName', title: '订购客户', event: 'customerName'},
                {field: 'goodsName', title: '订购产品', event: 'goodsName'},
                {field: 'number', title: '订购数量'},
                {field: 'price', title: '税前单价'},
                {field: 'priceUnit', title: '单位'},
                {field: 'orderStatus', title: '状态'},
                {field: 'orderDate', title: '订购日期', templet : "<div>{{layui.util.toDateString(d.orderDate, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"},
                {field: 'requiredDate', title: '要求日期', templet : "<div>{{layui.util.toDateString(d.requiredDate, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"},
                {field: 'requirement', title: '订单要求', event: 'requirement'},
                {field: 'image', title: '相关图片'},
                {field: 'attachment', title: '订单附件'},
                {fixed: 'right', title: "操作", width: '10%', align: 'center', toolbar: '#tools'}
            ]]
        })

        table.on('tool(test)', function (obj) {
            //获得当前行数据
            let rowData = obj.data;

            //获得当前行 tr 的 DOM 对象
            // let tr = obj.tr;

            //获取被点击列的订单id
            // let orderId = obj.data.id;

            //通过订单id从数组中查询订单信息
            // let orderDetail = array.data[orderId - 1];

            //回填值
            if (obj.event === 'customerName') {
                // 如果点击 订购客户列 显示客户详细信息

                // 向表单中设置值
                document.getElementById("customerName").value = rowData.customerName;
                document.getElementById("fullname").value = rowData.fullName;
                document.getElementById("fax").value = rowData.fax;
                document.getElementById("address").value = rowData.address;
                document.getElementById("manager").value = rowData.manager;
                document.getElementById("phone").value = rowData.phone;
                document.getElementById("mail").value = rowData.mail;
                document.getElementById("customerIntroduce").value = rowData.customerIntroduce;

                layer.open({
                    type: 1,
                    title: "客户信息",
                    area: ['50%', '80%'],
                    btn: ['确定', '取消'],
                    content: $('#customerDetail'),
                    yes: function (index, layero) {
                        reload();
                    }
                });
            } else if (obj.event === 'goodsName') {
                // 如果点击 订购产品列 显示产品详细信息

                // 向表单中设置值
                document.getElementById("goodsName").value = rowData.goodsName;
                document.getElementById("goodsType").value = rowData.type;
                document.getElementById("goodsStatus").value = rowData.status;
                document.getElementById("image").value = rowData.image;
                document.getElementById("goodsIntroduce").value = rowData.goodsIntroduce;

                layer.open({
                    type: 1,
                    title: "产品信息",
                    area: ['50%', '80%'],
                    btn: ['确定', '取消'],
                    content: $('#goodsDetail'),
                    yes: function (index, layero) {
                        reload();
                    }
                });
            } else if (obj.event === 'requirement') {
                document.getElementById("requirement").value = rowData.requirement;

                layer.open({
                    type: 1,
                    title: "订单要求",
                    area: ['50%', '80%'],
                    btn: ['确定'],
                    content: $('#required'),
                    yes: function (index, layero) {

                    }
                });
            } else if (obj.event === 'edit') {
                sessionStorage.setItem('editData', JSON.stringify(rowData));
            } else if (obj.event === 'delete') {
                let deleteArray = [obj.data];
                layer.confirm('确定删除？', {icon: 3}, function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: "/plan/orderDelete",
                        type: "post",
                        data: JSON.stringify(deleteArray),
                        //不要处理数据
                        processData: false,
                        //不要设置content-type请求头
                        contentType: "application/json",
                        success: function (res) {
                            if (res.code == 200) {
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功");
                                reload();
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    })
                });
            }
        })

        form.on('submit(search)', function (data) {
            let field = data.field; // 获得表单字段

            // 执行搜索重载
            table.reload('orderTable', {
                url: "/plan/orderDetail",
                // 搜索的字段
                where: field
            });
            // 阻止默认 form 跳转
            return false;
        });

        //执行一个date实例
        date.render({
            elem: '#start' //指定元素
        });

        //执行一个date实例
        date.render({
            elem: '#end' //指定元素
        });

        //重新渲染表格方法
        window.reload = function () {
            // 重新渲染表格
            table.reloadData('orderTable', {
                // 设定重载数据或切换分页时的滚动条的位置状态
                scrollPos: true,
            });
        }
    })

    // 批量删除
    function delAll() {
        let table = layui.table.checkStatus("orderTable");
        //获取选中行数据
        let data = table.data;
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: '/plan/orderDelete',
                method: 'post',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (data) {
                    layer.msg(data.msg);
                    reload();
                },
                error: function (data) {
                    layer.msg("网络错误");
                }
            })
        });
    }

</script>

</html>